<template>
  <div class="container_mine__main">
    <div
      class="container_mine__main__items"
      v-for="(item, index) of mineIconItems"
      :key="index"
      @click="
        () => {
          if (item.path && userInfo?.username) {
            router.push(item.path);
          }
        }
      "
    >
      <div
        class="container_mine__main__items__left iconfont"
        :style="{ color: item.color }"
        v-html="item.leftIcon"
      ></div>
      <div class="container_mine__main__items__mid">{{ item.text }}</div>
      <div
        class="container_mine__main__items__right iconfont"
        v-html="item.rightIcon"
      ></div>
    </div>
  </div>
</template>
<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import storage from "../../../utils/storage";
let userInfo = reactive({});
userInfo = storage.getItem("userInfo");
const router = useRouter();
const mineIconItems = [
  {
    leftIcon: "&#xe604;",
    text: "我的钱包",
    rightIcon: "&#xe7eb;",
    path: "",
    color: "#ffca34",
  },
  {
    leftIcon: "&#xe678;",
    text: "我的认证",
    rightIcon: "&#xe7eb;",
    path: "",
    color: "#1082ff",
  },
  {
    leftIcon: "&#xe80f;",
    text: "问诊及提问设置",
    rightIcon: "&#xe7eb;",
    path: "",
    color: "#a87dff",
  },
  {
    leftIcon: "&#xe740;",
    text: "我的专属客服",
    rightIcon: "&#xe7eb;",
    path: "",
    color: "#1082ff",
  },
  {
    leftIcon: "&#xe7b9;",
    text: "我的医生经纪人",
    rightIcon: "&#xe7eb;",
    path: "",
    color: "#ff7e00",
  },
  {
    leftIcon: "&#xe607;",
    text: "设置",
    rightIcon: "&#xe7eb;",
    path: "/mine/setting",
    color: "#ffca34",
  },
];
</script>
<style lang="scss" scoped>
.container_mine__main {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40rem;
  padding: 10rem 20rem;
  background-color: #fff;
  box-shadow: 0 3rem 6rem #eaeaeaa5;

  &__items {
    width: 100%;
    display: flex;
    justify-content: left;
    margin: 15rem 0;
    position: relative;
    align-items: center;

    &__left {
      margin-right: 10rem;
      font-size: 30rem;
      color: #ffca34;
      margin-right: 10rem;
    }
    &__mid {
      font-size: 16rem;
    }
    &__right {
      font-size: 20rem;
      position: absolute;
      right: 0;
    }
  }
  &__two {
    width: 100%;
    display: flex;
    justify-content: left;
    margin: 15rem 0;
    position: relative;
    align-items: center;
    &__left {
      margin-right: 10rem;
      font-size: 30rem;
      color: #1082ff;
    }
    &__mid {
      font-size: 16rem;
    }
    &__right {
      position: absolute;
      right: 0;
      font-size: 20rem;
    }
  }
  &__three {
    width: 100%;
    display: flex;
    justify-content: left;
    margin: 15rem 0;
    position: relative;
    align-items: center;
    &__left {
      margin-right: 10rem;
      font-size: 30rem;
      color: #a87dff;
    }
    &__mid {
      font-size: 16rem;
    }
    &__right {
      position: absolute;
      right: 0;
      font-size: 20rem;
    }
  }
  &__four {
    width: 100%;
    display: flex;
    justify-content: left;
    margin: 15rem 0;
    position: relative;
    align-items: center;
    &__left {
      margin-right: 10rem;
      font-size: 30rem;
      color: #1082ff;
    }
    &__mid {
      font-size: 16rem;
    }
    &__right {
      position: absolute;
      right: 0;
      font-size: 20rem;
    }
  }
  &__five {
    width: 100%;
    display: flex;
    justify-content: left;
    margin: 15rem 0;
    position: relative;
    align-items: center;
    &__left {
      margin-right: 10rem;
      font-size: 30rem;
      color: #ff7e00;
    }
    &__mid {
      font-size: 16rem;
    }
    &__right {
      position: absolute;
      right: 0;
      font-size: 20rem;
    }
  }
  &__six {
    width: 100%;
    display: flex;
    justify-content: left;
    margin: 15rem 0;
    position: relative;
    align-items: center;
    &__left {
      margin-right: 10rem;
      font-size: 30rem;
      color: #ffca34;
    }
    &__mid {
      font-size: 16rem;
    }
    &__right {
      position: absolute;
      right: 0;
      font-size: 20rem;
    }
  }
}
</style>
